<template>
  <!-- 用户评价 -->
  <section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark"
          >用户评价</h2
        >
        <p class="mt-4 text-neutral max-w-2xl mx-auto"
          >听听我们的用户如何评价初练音乐的服务和产品</p
        >
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div
          class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-custom"
        >
          <div class="flex text-yellow-400 mb-4">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
          <p class="text-neutral mb-6">
            "作为一名钢琴教师，我一直在寻找高质量的乐谱资源。初练音乐提供的肖邦夜曲全集非常棒，打印清晰，注释详尽，对我的教学帮助很大。"
          </p>
          <div class="flex items-center">
            <img
              src="https://picsum.photos/200/200?random=50"
              alt="用户头像"
              class="w-12 h-12 rounded-full mr-4"
            />
            <div>
              <h4 class="font-medium">李老师</h4>
              <p class="text-sm text-neutral">钢琴教师 • 北京</p>
            </div>
          </div>
        </div>

        <div
          class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-custom"
        >
          <div class="flex text-yellow-400 mb-4">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
          </div>
          <p class="text-neutral mb-6">
            "我是一名业余小提琴爱好者，在这里找到了很多经典曲目。下载速度快，客服响应及时，非常满意。夏季促销活动让我以很实惠的价格购买了多份乐谱。"
          </p>
          <div class="flex items-center">
            <img
              src="https://picsum.photos/200/200?random=51"
              alt="用户头像"
              class="w-12 h-12 rounded-full mr-4"
            />
            <div>
              <h4 class="font-medium">张小明</h4>
              <p class="text-sm text-neutral">小提琴爱好者 • 上海</p>
            </div>
          </div>
        </div>

        <div
          class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-custom"
        >
          <div class="flex text-yellow-400 mb-4">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star-half-o"></i>
          </div>
          <p class="text-neutral mb-6">
            "网站界面简洁易用，搜索功能强大。我能够快速找到想要的吉他谱，并且有多种格式可供选择。唯一的小缺点是某些偏门曲目的选择有限。"
          </p>
          <div class="flex items-center">
            <img
              src="https://picsum.photos/200/200?random=52"
              alt="用户头像"
              class="w-12 h-12 rounded-full mr-4"
            />
            <div>
              <h4 class="font-medium">王大卫</h4>
              <p class="text-sm text-neutral">吉他手 • 广州</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
  const reviews = [
    {
      name: '李老师',
      desc: '钢琴教师 • 北京',
      avatar: 'https://picsum.photos/200/200?random=50',
      rate: 5,
      content:
        '作为一名钢琴教师，我一直在寻找高质量的乐谱资源。初练音乐提供的肖邦夜曲全集非常棒，打印清晰，注释详尽，对我的教学帮助很大。',
    },
    {
      name: '张小明',
      desc: '小提琴爱好者 • 上海',
      avatar: 'https://picsum.photos/200/200?random=51',
      rate: 5,
      content:
        '我是一名业余小提琴爱好者，在这里找到了很多经典曲目。下载速度快，客服响应及时，非常满意。夏季促销活动让我以很实惠的价格购买了多份乐谱。',
    },
    {
      name: '王大卫',
      desc: '吉他手 • 广州',
      avatar: 'https://picsum.photos/200/200?random=52',
      rate: 4.5,
      content:
        '网站界面简洁易用，搜索功能强大。我能够快速找到想要的吉他谱，并且有多种格式可供选择。唯一的小缺点是某些偏门曲目的选择有限。',
    },
  ];
</script>

<style scoped>
  .user-reviews {
    background: #f9fafb;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
</style>
